@import '../../../themes/basic/mixins.less';

:host {
  --ti-alert-container-width: 400px;
  --ti-alert-padding-horizontal: var(--ti-common-space-4x);
  --ti-alert-padding-vertical: var(--ti-common-space-3x);
  --ti-alert-small-padding-vertical: var(--ti-common-space-2x);
  --ti-alert-type-icon-margin-right: var(--ti-common-space-2x);
  --ti-alert-type-icon-size: var(--ti-common-size-4x);
  --ti-alert-close-icon-size: var(--ti-common-size-3x);
  --ti-alert-close-icon-margin-left: var(--ti-common-space-4x);
}

:host {
  display: block;
  width: var(--ti-alert-container-width);
}

.ti3-icon {
  font-size: calc(var(--ti-alert-type-icon-size) * 0.75);
}

.ti3-alert-container {
  padding: var(--ti-alert-padding-vertical) var(--ti-alert-padding-horizontal);
  .box-sizing(border-box);
  border: var(--ti-common-border-weight-normal) var(--ti-common-border-style-solid);
  border-radius: var(--ti-common-border-radius-normal);
  width: 100%;
  font-weight: normal;
  display: flex;
  align-items: center;
  &.ti3-alert-dark-theme {
    background: var(--ti-common-color-bg-dark-deep);
    border: none;
    .ti3-alert-label {
      color: var(--ti-common-color-text-gray);
    }
    .ti3-alert-close-icon {
      color: var(--ti-common-color-icon-darkbg-normal);
    }
  }

  &.ti3-alert-size-small {
    padding: var(--ti-alert-small-padding-vertical) var(--ti-alert-padding-horizontal);
  }
}

.ti3-alert-error-container {
  background: var(--ti-common-color-error-bg);
  border-color: var(--ti-common-color-error-border-secondary);
  & .ti3-alert-circle {
    background: var(--ti-common-color-error);
  }
}

.ti3-alert-prompt-container {
  background: var(--ti-common-color-prompt-bg);
  border-color: var(--ti-common-color-prompt-border);
  & .ti3-alert-circle {
    background: var(--ti-common-color-prompt);
  }
}

// alert-messages布局页头对齐
.ti-alert-message-container {
  align-items: flex-start;
}

.ti3-alert-warn-container {
  background: var(--ti-common-color-warn-bg);
  border-color: var(--ti-common-color-warn-border);
}

.ti3-alert-success-container {
  background: var(--ti-common-color-success-bg);
  border-color: var(--ti-common-color-success-border);
  & .ti3-alert-circle {
    background: var(--ti-common-color-success);
  }
}

.ti3-alert-simple-container {
  border-color: var(--ti-common-color-line-normal);
}

.ti3-alert-success-container.ti3-alert-box-shadow {
  .box-shadow(var(--ti-common-shadow-success));
}
.ti3-alert-error-container.ti3-alert-box-shadow {
  .box-shadow(var(--ti-common-shadow-error));
}
.ti3-alert-prompt-container.ti3-alert-box-shadow {
  .box-shadow(var(--ti-common-shadow-prompt));
}
.ti3-alert-warn-container.ti3-alert-box-shadow {
  .box-shadow(var(--ti-common-shadow-warn));
}
.ti3-alert-dark-theme.ti3-alert-box-shadow {
  .box-shadow(var(--ti-common-shadow-3-down));
}

// alert字体图标有两部分组成：圆圈和字体图标，此处为圆圈样式
.ti3-bg-circle(@width) {
  display: inline-block;
  width: @width;
  height: @width;
  border-radius: 50%;
  text-align: center;
  line-height: @width;
}

.ti3-alert-icon {
  line-height: var(--ti-alert-type-icon-size);
}

.ti3-alert-circle {
  .ti3-bg-circle(var(--ti-alert-type-icon-size));
  color: var(--ti-common-color-icon-white);
  margin-right: var(--ti-alert-type-icon-margin-right);
}

.ti3-alert-warn-bg {
  height: var(--ti-alert-type-icon-size);
  width: var(--ti-alert-type-icon-size);
  line-height: var(--ti-alert-type-icon-size);
  font-size: var(--ti-alert-type-icon-size);
  display: inline-block;
  color: var(--ti-common-color-warn);
  position: relative;
  margin-right: var(--ti-alert-type-icon-margin-right);
}

.ti3-alert-warn-icon {
  height: var(--ti-alert-type-icon-size);
  position: absolute;
  left: calc((var(--ti-alert-type-icon-size) - var(--ti-alert-type-icon-size) * 0.75) / 2);
  bottom: -1px;
  color: var(--ti-common-color-icon-white);
}

.ti3-alert-label {
  // 修改该行样式时需要同步修改ts中的变量TYPEICON_WIDTH和CLOSEICON_WIDTH
  width: calc(
    100% - var(--ti-alert-type-icon-size) - var(--ti-alert-close-icon-size) - var(--ti-alert-type-icon-margin-right) -
      var(--ti-alert-close-icon-margin-left)
  );
  display: inline-block;
  line-height: var(--ti-common-line-height-number);
  font-size: var(--ti-common-font-size-base);
  font-weight: var(--ti-common-font-weight-4);
  word-wrap: break-word;
  overflow-wrap: break-word;
  color: var(--ti-common-color-text-secondary);

  &.ti3-alert-label-with-closeIcon {
    width: calc(100% - var(--ti-alert-close-icon-size) - var(--ti-alert-close-icon-margin-left));
  }

  &.ti3-alert-label-with-typeIcon {
    width: calc(100% - var(--ti-alert-type-icon-size) - var(--ti-alert-type-icon-margin-right));
  }

  &.ti3-alert-only-label {
    width: 100%;
  }
}

.ti3-alert-close-icon {
  display: inline-block;
  width: var(--ti-alert-close-icon-size);
  font-size: var(--ti-alert-close-icon-size);
  vertical-align: top;
  margin-left: var(--ti-alert-close-icon-margin-left);
  cursor: pointer;
  line-height: var(--ti-common-line-height-number);
}

.ti3-alert-error-container .ti3-alert-close-icon {
  color: var(--ti-common-color-error);
}

.ti3-alert-prompt-container .ti3-alert-close-icon {
  color: var(--ti-common-color-prompt);
}

.ti3-alert-success-container .ti3-alert-close-icon {
  color: var(--ti-common-color-success);
}

.ti3-alert-warn-container .ti3-alert-close-icon {
  color: var(--ti-common-color-warn);
}

.ti3-alert-simple-container .ti3-alert-close-icon {
  color: var(--ti-common-color-icon-normal);
}

.ti3-alert-message {
  display: flex;
  flex-direction: column;
  position: relative;
}

.ti3-alert-message-page-container {
  display: inline-block;
  flex-shrink: 0;
  margin-left: var(--ti-common-space-3x);
}

.ti3-alert-message-page {
  display: inline-block;
  width: var(--ti-common-space-2x);
  height: var(--ti-common-space-2x);
  margin-left: var(--ti-common-space-2x);
  border-radius: 50%;
  border: 1px solid var(--ti-common-color-line-active);
  box-sizing: border-box;
  &:first-child {
    margin-left: 0;
  }
  &:hover {
    cursor: pointer;
  }
}

.ti3-alert-message-page-active {
  background-color: var(--ti-common-color-line-active);
}
